<template>
  <div class="placeholder-div">
    <div class="top-nav-bar-style">
      <!-- 导航栏LOGO -->
      <div class="logo-div-style">
        <img style="width:216px;height: 38px;" :src="require('@/assets/images/logo1.png')">
      </div>
      <!-- 导航栏LOGO -->

      <!-- 导航栏 -->
      <!--      <div class="navbar-content-left">-->
      <!--        <div style="font-size: 13px;margin-top: -4px;"-->
      <!--             v-for="(item, index) in topNavBarItem"-->
      <!--             :key="`a${index}`"-->
      <!--             :class="activeItem == index ? 'active-ul-btns' : 'ul-btns'"-->
      <!--             @click="changeTopNavigationBar(item)">-->
      <!--          {{ item.platformName }}-->
      <!--        </div>-->
      <!--      </div>-->
      <ul class="ul-style">
        <li
          v-for="(item, index) in topNavBarItem"
          :key="`a${index}`"
          style="font-size: 17px;"
          :class="activeItem == item.platformUrlAttrList[0].redirectUri || platformName == item.platformName ? 'active-ul-btns' : 'ul-btns'"
          @click="changeTopNavigationBar(item)">
          {{ item.platformName }}
          <!-- <div class="ul-dropdown-div">
            <ul class="ul-dropdown">
              <li
                v-for="(innerItem, innerIndex) in item.children"
                :key="`b${innerIndex}`"
                class="ul-dropdown-li"
                @click="clickTopNavigationBarInnerBar(item.value, innerItem.value)">
                {{ innerItem.name }}
              </li>
            </ul>
          </div> -->
        </li>
      </ul>
      <!-- 导航栏 -->

      <!-- 右侧登录信息 -->
      <div class="navbar-content-right" style="font-size: 10px;margin-top: -10px;">
        <div class="username" :title="userInfo && userInfo.username">欢迎您，{{ userInfo && userInfo.username }}</div>
        <div @click="logout">退出</div>
        <div @click="dialogFormVisible = true">密码修改</div>
        <div>帮助</div>
      </div>
      <!--      <div class="navbar-content-right" style="font-size: 10px;">-->
      <!--        <div v-if="!hasToken" @click="gotoLogo">登录</div>-->
      <!--        <div v-if="hasToken" class="username" :title="userInfo && userInfo.username">欢迎您，{{ userInfo && userInfo.username }}</div>-->
      <!--        <div v-if="hasToken" @click="logout">退出</div>-->
      <!--        <div>帮助</div>-->
      <!--      </div>-->
      <!-- 右侧登录信息 -->
    </div>

    <!-- 下拉时背景色填充 -->
    <div
      v-show="isNotTransparent"
      class="top-nav-bar-background" />
    <!-- 下拉时背景色填充 -->
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { jumpToLogin } from '@/utils/public'
import { mapGetters } from 'vuex'
import store from '@/store'
import { getListEnable, listNoLoginEnable, logout } from '@/api/main'
export default {
  props: {
    // 选中的导航栏项
    activeItem: {
      type: String,
      default: ''
    },

    // 透明开关
    isNotTransparent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // platformName: JSON.parse(localStorage.getItem('platformName')),
      // 是否填充背景色
      fillBackground: false,

      // 顶部导航栏项
      topNavBarItem: [
        { platformName: '系统链接', children: [], platformUrlAttrList: [{ redirectUri: '/ywzt' }] }
        // { platformName: '安全管理', children: [], platformUrlAttrList: [{ redirectUri: '/module/layout/page-transfer' }] },
        // { platformName: '供电数据中心', children: [], platformUrlAttrList: [{ redirectUri: '/module/jcwsc/basic-data/line' }] },
        // { platformName: '检测监测', children: [], platformUrlAttrList: [{ redirectUri: '/cms' }] },
        // { platformName: '设备维修', children: [], platformUrlAttrList: [{ redirectUri: '/bureau-level-home' }] },
        // { platformName: '供电PHM', children: [], platformUrlAttrList: [{ redirectUri: '/phm/welcome' }] },
        // { platformName: '应急辅助', children: [], platformUrlAttrList: [{ redirectUri: '/pspc/gis-index' }] },
        // { platformName: '系统链接', children: [], platformUrlAttrList: [{ redirectUri: '/ywzt' }] },
      ],
      hasToken: getToken() && getToken() !== 'undefined'
    }
  },
  computed: {
    ...mapGetters(['navigationInfo', 'userInfo'])
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
    this.getListEnable()
    // if (!this.navigationInfo.length) {
    //   this.getListEnable()
    // } else {
    //   this.topNavBarItem = this.navigationInfo
    // }
  },
  methods: {
    // 跳转登录页
    gotoLogo() {
      window.location.assign('/login')
    },
    // 退出登录
    logout() {
      logout({ token: getToken() }).then(() => {
        jumpToLogin()
      })
    },
    // 获取导航应用
    getListEnable() {
      getListEnable({ isDisplayOnBar: 1 }).then(response => {
        this.topNavBarItem.splice.apply(this.topNavBarItem, [0, 0].concat(response.data)) // 临时演示修改
        // this.topNavBarItem.splice.apply(this.topNavBarItem, [4, 0].concat(response.data.slice(0, 5)))
        store.dispatch('app/setNavigationInfo', this.topNavBarItem)
      })
      // if (this.hasToken) {
      //   getListEnable({ isDisplayOnBar: 1 }).then(response => {
      //     this.topNavBarItem.splice.apply(this.topNavBarItem, [0, 0].concat(response.data)) // 临时演示修改
      //     // this.topNavBarItem.splice.apply(this.topNavBarItem, [4, 0].concat(response.data.slice(0, 5)))
      //     store.dispatch('app/setNavigationInfo', this.topNavBarItem)
      //   })
      // } else {
      //   listNoLoginEnable({ isDisplayOnBar: 1 }).then(response => {
      //     this.topNavBarItem.splice.apply(this.topNavBarItem, [1, 0].concat(response.data.slice(0, 5))) // 临时演示修改
      //     // this.topNavBarItem.splice.apply(this.topNavBarItem, [4, 0].concat(response.data.slice(0, 5)))
      //     store.dispatch('app/setNavigationInfo', this.topNavBarItem)
      //   })
      // }
    },
    // 滚动触发
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 20) {
        this.fillBackground = true
      } else {
        this.fillBackground = false
      }
    },

    // 更改所选菜单栏
    changeTopNavigationBar(item) {
      localStorage.setItem('appId', JSON.stringify(item.platformUrlAttrList[0].appId))
      localStorage.setItem('appName', JSON.stringify(item.platformUrlAttrList[0].appName))
      localStorage.setItem('platformName', JSON.stringify(item.platformName))
      if (item.platformUrlAttrList[0].redirectUri === '/' || item.platformUrlAttrList[0].redirectUri === '/organization' || item.platformUrlAttrList[0].redirectUri === '/rule-regulation-management' || item.platformUrlAttrList[0].redirectUri === '#') {
        window.location.assign(item.platformUrlAttrList[0].redirectUri)
      } else if (this.hasToken) {
        window.location.assign(item.platformUrlAttrList[0].redirectUri)
      } else if (!this.hasToken) {
        this.$confirm('系统识别您尚未登录，是否跳转登录页面？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            window.location.assign('/login')
          })
          .catch(() => {})
      }
    },

    // 点击菜单栏子项
    clickTopNavigationBarInnerBar(value, innervalue) {
      switch (value) {
        case '4':
          switch (innervalue) {
            case '0':
              window.location.assign('/jjzhxt/welcome')
              // if (this.$router.history.current.path !== '/production-safety/integrated-management/integrated-management') {
              //   this.$router.push('/production-safety/integrated-management/integrated-management')
              // }
              break
          }
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.placeholder-div {
  height: 68px;
  .top-nav-bar-style {
    position: fixed;
    top: 0;
    width: 100%;
    height: 58px;
    border-bottom: 3px solid #2d6dd4;
    display: flex;
    //background-color: rgba($color: #081b4d, $alpha: 0.66);
    background-color: #081B4D;
    align-items: center;
    z-index: 2;
    .logo-div-style {
      color: white;
      padding: 0 40px 0 32px;
      width: 332px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ul-style {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    .ul-btns {
      position: relative;
      font-size: 22px;
      background-color: transparent;
      float: left;
      list-style: none;
      width: auto;
      height: 100%;
      text-align: center;
      line-height: 68px;
      color: white;
      padding: 0 15px 0 15px;
      .ul-dropdown-div {
        display: none;
      }
    }
    .active-ul-btns {
      font-size: 22px;
      background-color: #2d6dd4;
      float: left;
      list-style: none;
      width: auto;
      height: 100%;
      text-align: center;
      line-height: 68px;
      color: white;
      padding: 0 22px 0 22px;
      cursor: pointer;
    }
    .ul-btns:hover {
      color: white;
      background-color: #2d6dd4;
      cursor: pointer;
      .ul-dropdown-div {
        display: inline;
        position: absolute;
        top: 66px;
        left: 0;
        right: 0;
        .ul-dropdown {
          font-size: 22px;
          list-style: none;
          width: auto;
          height: 100%;
          text-align: center;
          line-height: 68px;
          color: #7f8c8d;
          font-size: 13px;
          background-color: #ffffff;
          border-left: 1px solid #D7DDE4;
          border-right: 1px solid #D7DDE4;
          box-sizing: border-box;
          .ul-dropdown-li:hover {
            background-color: #F2F2F2;
          }
        }
      }
    }
  }
  .top-nav-bar-background {
    position: fixed;
    top: 0;
    width: 100%;
    height: 68px;
    background-color: rgba($color: #091c4c, $alpha: 1);
    z-index: 1;
  }
  .navbar-content-right {
      margin-left: auto;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #FFFFFF;
      div {
        position: relative;
        height: 100%;
        line-height: 28px;
        padding: 20px 10px;
        margin-right: 10px;
        cursor: pointer;
        &:hover {
          background: #2d6dd4;
        }
        &:after {
          position: absolute;
          top: 24px;
          right: -6px;
          content: '';
          width: 1px;
          height: 18px;
          border-right: 1px solid #FFFFFF;
        }
        &:last-of-type {
          &:after {
            width: 0px;
            height: 0px;
          }
        }
        &:nth-child(2) {
          &:before {
            position: absolute;
            top: 24px;
            left: -6px;
            content: '';
            width: 1px;
            height: 18px;
            border-right: 1px solid #FFFFFF;
          }
        }
      }
      .username {
        max-width: 200px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
}
</style>
